<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{user.name}}
        {{user.age}}
        {{user.color}}
        <button @click="change">改变</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                user:{
                    name:'zhangsan'
                }
            },
            methods:{
                change(){
                    // this.user.age = 30;
                    this.$set(this.user,'age',20);
                }
            }
        })

        // vm.$set(vm.user,'age',19);

        // vm.$set(vm.$data,'age',20);//错误  不能在根添加数据

        // vm.user = Object.assign({},vm.user,{age:19,color:'yellow'})

        // vm.b = 2;
        // console.log(vm.user.name);
        // vm.user.name = 'lisi'

        // vm.$set(target,key,value)
        // vm.$set(vm.user,'name','lisi2');

        // Vue.set(vm.$data.user,'name','lisi3');

        //实例的vm.$set()是全局Vue.set()方法的别名
    </script>
</body>
</html> 